<template>
  <div class="aiseo-home-server">
    <ul class="server-content">
      <li
        @click="handleClickTo(item)"
        class="content-item"
        v-for="(item, index) in serveList"
        :key="index"
        :class="`content-item${index}`"
      >
       <div class="item-title">
          {{ item.title }}<el-icon class="ml-8"><ArrowRightBold /></el-icon>
        </div>
        <ul class="item-description mt-16">
          <li v-for="ii in item.desc">{{ ii }}</li>
        </ul>
       <img :src="item.number1" alt="" class="item-number item-number1" />
       <img :src="item.number11" alt="" class="item-number item-number11" />

        <!--   <span class="item-number">{{ item.number }}</span> -->
        <!-- <a href="#">咨询详情</a> -->
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import EventBus from "@/utils/eventBus.js";
import { useRoute, useRouter } from "vue-router";
import { ArrowRightBold } from "@element-plus/icons-vue";
import number1 from "@/assets/image/pageHome/img.png";
import number11 from "@/assets/image/pageHome/img1.png";
import number2 from "@/assets/image/pageHome/tel.png";
import number21 from "@/assets/image/pageHome/tel1.png";
import number3 from "@/assets/image/pageHome/file.png";
import number31 from "@/assets/image/pageHome/file1.png";
import number4 from "@/assets/image/pageHome/mes.png";
import number41 from "@/assets/image/pageHome/mes1.png";
import number5 from "@/assets/image/pageHome/footer11.png";
import number51 from "@/assets/image/pageHome/footer111.png";
import number6 from "@/assets/image/pageHome/ex.png";
import number61 from "@/assets/image/pageHome/ex1.png";

const router = useRouter();
const serveList = ref([
  {
    title: "文案撰写",
    desc: ["代撰写文章", "专业定制", "各类专业领域&不同风格"],
    number1,
    number11,
    router: "/writingtext",
  },
  {
    title: "SEO定制",
    desc: ["低成本", "快速提高权重", "快速提高关键词排名"],
    number1: number2,
    number11: number21,
    router: "/seoCustomer",
  },
  {
    title: "软文推广",
    desc: ["海量媒体渠道", "全网推广", "帮助您的文章火爆全网"],
    number1: number3,
    number11: number31,
    router: "/softArticlePromotion",
  },
  {
    title: "网站优化",
    desc: ["关键词排名", "网站权重", "流量低成本高效提升"],
    number1: number4,
    number11: number41,
    router: "/websiteOptimization",
  },
  {
    title: "网站联运",
    desc: ["专家团队运营", "快速成型网站","老站短期焕发新生"],
    number1: number5,
    number11: number51,
    router: "/websiteIntermodalTransportation",
  },
  {
    title: "定制需求",
    desc: ["以上方案都不满意？", "↓", "点此直接定制您的专属需求"],
    number1: number6,
    number11: number61,
  },
]);
const handleClickTo = (item) => {
  if (item.title === "定制需求") {
    EventBus.emit("clicktoCustomizedServices");
  } else {
    router.push(item.router);
  }
};
const servetype = ref(false);
</script>

<style lang="scss" scoped>
.aiseo-home-server {
  width: 100%;
  height: 444px;
  position: relative;
  background: #f5f5f5;
  z-index: 2;
  .server-content {
    width: $aiseoHomeWidth;
    margin: 0 auto;
    position: relative;
    top: -100px;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    .content-item {
      background: #ffffff;
      border-radius: 12px;
      padding: 40px;
      box-sizing: border-box;
      position: relative;
      cursor: pointer;
      .item-number1{
        display: block;
      }
      .item-number11{
        display: none;
      }
      &:hover{
        .item-number11{
        display: block;
      }
      .item-number1{
        display: none;
      }
      }
      .item-title {
        font-family: Alibaba PuHuiTi-Bold;
        font-weight: bold;
        font-size: 32px;
        color: #1a1a1a;
		display: flex;
		align-items: center;
        line-height: 32px;
        .el-icon {
          font-size: 16px;
          opacity: 0;
        }
      }
      .item-description {
        font-size: 20px;
        color: #808080;
        font-family: Alibaba PuHuiTi-Medium;
        li + li {
          margin-top: 8px;
        }
      }
      .item-number {
        position: absolute;
        right: 40px;
        top: 30%;
        width: 84px;
      }
    }
    .content-item:hover {
      background: #e62e3d;
      box-shadow: 0px 4px 7px 0px rgba(230,46,61,0.24);
      .item-title {
        color: #ffffff;
        .el-icon {
          opacity: 1;
        }
      }
      .item-description {
        color: #ffffff;
      }
    }
  }
}
// @media only screen and (max-width: 600px) {
//   .aiseo-home-server {
//     width: 100%;
//     height: 444px;
//     position: relative;
//     background: #f5f5f5;
//     z-index: 2;
//     .server-content {
//       width: $aiseoHomeWidth;
//       margin: 0 auto;
//       position: relative;
//       top: -100px;
//       display: grid;
//       grid-template-rows: repeat(2, 1fr);
//       grid-template-columns: repeat(3, 1fr);
//       gap: 2px;
//       .content-item {
//         background: #ffffff;
//         border-radius: 12px;
//         border: 1px solid #f0f0f0;
//         padding: 20px;
//         box-sizing: border-box;
//         position: relative;
//         cursor: pointer;
//         .item-title {
//           font-weight: bold;
//           font-size: 12px;
//           color: #1a1a1a;
//           line-height: 32px;
//           .el-icon {
//             font-size: 2px;
//             opacity: 0;
//           }
//         }
//         .item-description {
//           font-size: 1px;
//           color: #808080;
//           li + li {
//             margin-top: 8px;
//           }
//         }
//         .item-number {
//           position: absolute;
//           right: 40px;
//           top: 30%;
//           width: 84px;
//         }
//       }
//       .content-item:hover {
//         background: #e62e3d;
//         .item-title {
//           color: #ffffff;
//           .el-icon {
//             opacity: 1;
//           }
//         }
//         .item-description {
//           color: #ffffff;
//         }
//       }
//     }
//   }
// }
</style>
